<template>
    <div>

        <nav-header>
            <template v-slot:title>添加地址</template>
        </nav-header>

        <div style="margin: 10px;">
            <div
                style="width: 100%;border-radius: 15px;background-color: #fff;box-shadow: 0 0 6px 3px #eee;padding: 15px;margin-bottom: 10px;">
                <div class="container-fluid">
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">收件人：</div>
                        <div class="col-xs-6" style="text-align: center"><input v-model="data.receiver_name" type="text"
                                                                                placeholder="请输入收件人姓名" required/></div>
                    </div>
                    <div class="row" style="padding-bottom: 15px;">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">电话号码：</div>
                        <div class="col-xs-6" style="text-align: center"><input v-model="data.mobile_number"
                                                                                type="number" required
                                                                                placeholder="请输入收件人电话号码"/>
                        </div>
                    </div>
                    <div class="row" style="padding-bottom: 5px;">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">详细地址：</div>
                    </div>
                    <div class="row" style="padding-bottom: 35px;">
                        <div class="col-xs-12"><input v-model="data.address" type="text" required
                                                      placeholder="请输入详细地址"/></div>
                    </div>
                    <div class="row" style="">
                        <div class="col-xs-6" style="font-size: 15px;font-weight: bold">设为默认地址</div>
                        <div class="col-xs-6" style="text-align: center">
                            <label @click="setDefault(data)" class="ios-switch"
                                   :class="{active: data.is_default == 1 ? true :false}">
                                <input style="display: none" type="checkbox">
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div style="text-align: center;margin-top: 60px;">
                <button
                    @click="postAddressEdit"
                    style="width: 50%;border: none;background-color: rgb(214, 111, 84);color: #fff;text-align: center;border-radius: 25px;line-height: 50px;">
                    保存地址
                </button>
            </div>


        </div>
    </div>
</template>
<script>
    import NavHeader from "../Layout/NavHeader";
    import swal from "sweetalert";

    export default {
        components: {NavHeader},
        data() {
            return {
                data: {
                    id: 0,
                    receiver_name: '',
                    mobile_number: '',
                    address: '',
                    is_default: 0,
                },
            }
        },
        created() {
        },
        mounted() {
            let id = this.$route.params.id;
            if (id) {
                this.getAddress(id);
            }
        },
        methods: {
            setDefault(item) {
                let now = +new Date();
                if (now - this.switchTime < 500) {
                    return;
                }
                if (item.is_default == 1) {
                    item.is_default = 0;
                } else if (item.is_default == 0) {
                    item.is_default = 1;
                }
                this.switchTime = now;
            },
            getAddress(id) {
                let wx_openid = localStorage.getItem('wx_openid');
                let that = this;
                this.api.getAddress(wx_openid, id).then(res => {
                    if (res.data) {
                        that.data = res.data;
                    }
                });
            },
            postAddressEdit() {
                let wx_openid = localStorage.getItem('wx_openid');
                this.api.postAddressEdit(wx_openid, this.data).then(res => {
                    if (res.meta.code == '000') {
                        swal("操作成功").then((value) => {
                            window.history.back();
                        });
                    }
                });
            }
        },
    }
</script>
<style scoped>
    .ios-switch {
        border-radius: 31px;
        width: 42px;
        height: 28px;
        background-color: #fff;
        outline: none;
        box-shadow: inset 0 2px 4px gray;
        position: relative;
    }

    label.ios-switch:after {
        content: '';
        position: absolute;
        left: -12px;
        bottom: -3px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #e9e9eb;
    }

    label.active.ios-switch:after {
        content: '';
        position: absolute;
        left: 20px;
        bottom: -3px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: rgb(192, 92, 50);
    }

    input {
        width: 100%;
        border: none;
    }

    input:focus {
        outline: none;
    }

</style>
